/**
 * MineAdmin is committed to providing solutions for quickly building web applications
 * Please view the LICENSE file that was distributed with this source code,
 * For the full copyright and license information.
 * Thank you very much for using MineAdmin.
 *
 * @Author X.Mo<root@imoi.cn>
 * @Link   https://github.com/mineadmin
 */

import { DepartmentsVo } from "@/modules/departments/api/departments";
import type { MaFormItem } from "@mineadmin/form";
import type { UserVo } from "~/base/api/user.ts";
import { all as schoolAll, SchoolVo } from "~/school/api/school";
import { page } from "~/teacher/api/teacher";
//@ts-ignore
import RemoteSelect from "@/components/ma-remote-select/index.vue";
export default function getFormItems(
  formType: "add" | "edit" = "add",
  t: any,
  model: UserVo
): MaFormItem[] {
  if (formType === "add") {
    // model.password = "123456";
  }

  const treeSelectRef = ref();
  const schools = ref<SchoolVo[]>([]);
  const departments = ref<DepartmentsVo[]>([]);
  schoolAll().then((res) => {
    schools.value = res.data;
    departments.value = res.data[0].departments || [];
  });
  const onChange = function (school_id: number) {
    departments.value =
      schools.value.find((school) => school.id == school_id)?.departments || [];
  };

  const loadTeacher = (node, resolve) => {
    console.log(node);
    page({}).then((res) => {
      console.log(res);
    });
    if (node.isLeaf) return resolve([]);
    setTimeout(() => {
      resolve([]);
    }, 400);
  };
  return [
    {
      label: () => t("classroom.school"),
      prop: "school_id",
      render() {
        return (
          <el-tree-select
            filterable
            onChange={onChange}
            ref={treeSelectRef}
            data={schools.value}
            props={{ value: "id", label: "name" }}
            check-strictly={true}
            default-expand-all={true}
            clearable={true}
          >
            {{
              default: ({ node }) => {
                const { meta } = node.data;
                node.data.title = meta?.i18n
                  ? useTrans(meta.i18n)
                  : meta?.title ?? "unknown";
              },
            }}
          </el-tree-select>
        );
      },
      renderProps: {
        class: "w-full",
        placeholder: t("form.pleaseSelect", {
          msg: t("classroom.school"),
        }),
      },
      cols: { md: 12, xs: 24 },
      itemProps: {
        rules: [
          {
            required: true,
            message: t("form.requiredSelect", {
              msg: t("classroom.school"),
            }),
          },
        ],
      },
    },
    {
      label: () => t("classroom.department"),
      prop: "department_id",
      render: () => (
        <el-tree-select
          filterable
          ref={treeSelectRef}
          data={departments.value}
          props={{ value: "id", label: "name" }}
          check-strictly={true}
          default-expand-all={true}
          clearable={true}
        >
          {{
            default: ({ node }) => {
              const { meta } = node.data;
              node.data.title = meta?.i18n
                ? useTrans(meta.i18n)
                : meta?.title ?? "unknown";
            },
          }}
        </el-tree-select>
      ),
      renderProps: {
        class: "w-full",
        placeholder: t("form.pleaseSelect", {
          msg: t("classroom.school"),
        }),
      },
      cols: { md: 12, xs: 24 },
      itemProps: {
        rules: [
          {
            required: true,
            message: t("form.requiredSelect", {
              msg: t("classroom.school"),
            }),
          },
        ],
      },
    },
    {
      label: () => t("classroom.teacher"),
      prop: "teacher_id",
      render: () => RemoteSelect,
      renderProps: {
        class: "w-full",
        placeholder: t("form.pleaseSelect", {
          msg: t("classroom.teacher"),
        }),
        multiple: false,
        api: () => new Promise((resolve) => resolve(page({ page_size: 999 }))),
        dataHandle: (response: any) => {
          return response.data.list?.map((item: UserVo) => {
            return { label: `${item.nickname}`, value: item.id };
          });
        },
      },

      cols: { md: 12, xs: 24 },
      itemProps: {
        rules: [
          {
            required: true,
            message: t("form.requiredSelect", {
              msg: t("classroom.teacher"),
            }),
          },
        ],
      },
    },
    {
      label: () => t("classroom.name"),
      prop: "name",
      render: "input",
      renderProps: {
        placeholder: t("form.pleaseInput", { msg: t("classroom.name") }),
      },
      itemProps: {
        rules: [
          {
            required: true,
            message: t("form.requiredInput", { msg: t("classroom.name") }),
          },
        ],
      },
    },
  ];
}
